<template>
    <div>
      <div class="btn" @click="dialogFormVisible=true">
          新增保养项
      </div>
      <el-dialog title="新增保养项" :visible.sync="dialogFormVisible">
          <el-form :model="addProjectData">
            <el-form-item label="名称">
              <el-input v-model="addProjectData.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="检验方法">
              <el-input v-model="addProjectData.checkMethod" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="检验工具">
              <el-input v-model="addProjectData.checkTools" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="检验标准">
              <el-input v-model="addProjectData.checkStatus" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="判断标准">
              <el-select v-model="addProjectData.checkType" placeholder="请选择判断标准">
                <el-option label="直接确认" value="直接确认"></el-option>
                <el-option label="填写值" value="填写值"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所属分组">
              <el-input v-model="addProjectData.keepProjectGroupId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="标准上限">
              <el-input v-model="addProjectData.checkMax" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="标准下限">
              <el-input v-model="addProjectData.checkMin" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="执行人">
              <el-select v-model="addProjectData.projectUserIds" multiple placeholder="请选择">
                <el-option v-for="item in users" :key="item.name" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="addProjectData.remark" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false , addProjectData={}">取 消</el-button>
            <el-button type="primary" @click="keepProjectAdd1()">确 定</el-button>
          </div>
        </el-dialog>
        <div class="title1">保养项目</div>
      <div class="box">
          <div class="left_1">
              <left-components-vue @changedItem="changedGroup" title="项目组" :data="group"></left-components-vue>
          </div>
          <div class="right_1">
              <el-table :data="projects" border style="width: 100%">
                  <el-table-column prop="name" label="保养项目名称"></el-table-column>
                  <el-table-column prop="id" label="保养项目编号"></el-table-column>
                  <el-table-column prop="checkMethod" label="校验方法"></el-table-column>
                  <el-table-column prop="checkTools" label="校验工具"></el-table-column>
                  <el-table-column prop="checkStatus" label="校验标准"></el-table-column>
                  <el-table-column prop="checkType" label="判断标准"></el-table-column>
                  <el-table-column prop="checkMax" label="标准上限"></el-table-column>
                  <el-table-column prop="checkMin" label="标准下限"></el-table-column>
                  <el-table-column label="执行人">
                      <template slot-scope="scope">
                          <span v-for="(item, index) in scope.row.projectUsers" :key="item.id">
                              <span v-if="index != 0">,</span>
                              {{ item.name }}
                          </span>
                      </template>
                  </el-table-column>
                  <el-table-column prop="remark" label="备注"></el-table-column>
              </el-table>
          </div>
      </div>
    </div>
  </template>
  
  <script>
  import { keepProjectGroup,keepProject,keepProjectAdd } from '@/api/keep';
  import { sysUser } from '@/api/role';
  import LeftComponentsVue from '@/components/LeftComponents.vue';
  export default {
      components:{
          LeftComponentsVue,
      },
      data(){
          return{
              group:[],
              currentGroupId:null,
              projects:[],
              dialogFormVisible:false,
              centerDialogVisible:false,
              userDialogVisible:false,
              users:[],
              userParams:{
                  departmentId:0,
                  status:null
              },
              tpmUser:[],
              addUser2:[],
              addProjectData:{
                  name:"",
                  checkMethod:"",
                  checkTools:"",
                  checkStatus:"",
                  checkType:"",
                  checkMax:"",
                  checkMin:"",
                  remark:"",
                  keepProjectGroupId:null,
                  projectUserIds:[]
              }   
          }
      },
      mounted(){
          let that = this;
          keepProjectGroup().then(res=>{
              that.group = res.data.data;
              that.currentGroupId = that.group[0].id;
              that.getProjects();
          })
          sysUser(this.userParams).then(res=>{
              this.users = res.data.data;
          })
      },
      methods:{
          changedGroup(id){
              this.currentGroupId = id;
              this.getProjects();
          },
          getProjects(){
              let that = this;
              keepProject({
                  keepGroupId:that.currentGroupId
              }).then(res=>{
                  that.projects = res.data.data;
              })
          },
          keepProjectAdd1(){
              let that = this;
              keepProjectAdd(this.addProjectData).then(res=>{
                  console.log(this.addProjectData);
                  if(res.data.code == 2001){
                      that.$message({
                          message:'添加成功',
                          type:'success'
                      })
                      that.getProjects();
                  }else{
                      that.$message({
                          message:'添加失败'+res.data.msg,
                         type:'error'
                      })
                  }
              })
              this.dialogFormVisible = false;
              this.getProjects();
          }
      }
  
  }
  </script>
  
  <style scoped>
  .box{
      display: flex;
  }
  .active{
      background-color: gray;
      color: white;
  }
  .left_1{
      width: 200px;
  }
  .right_1{
      width: 100%;
      margin-top: 40px;
      margin-left: 50px;
  }
  .input_div{
      width: 100px;
      height:40px;
      border: 1px solid black;
  }
  .box_user{
      display: flex;
  }
  .box_user>div{
      background-color: red;
      margin: 10px;
      width: 100%;
  }
  .btn{
      width: 100px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      /* float: right; */
      position: absolute;
      right: 20px;
      background-color: blue;
      color: #fff;
      border-radius: 5px;
  }
  </style>